<template>
  <view class="ui-loading" :class="[`ui-loading--${type}`]">
    <view
      class="ui-loading--spinner ui-loading--spinner-circular"
      :style="spinnerStyle"
      v-if="type === 'circular'"
    >
      <text class="spinner-circular"></text>
    </view>
    <view class="ui-loading--spinner" v-if="type === 'spinner'" :style="spinnerStyle">
      <text v-for="i in 12" :key="i" class="spinner-i"></text>
    </view>
    <text class="ui-loading--text" v-if="$slots.default">
      <slot></slot>
    </text>
  </view>
</template>

<script>
import uiIcon from "@/components/base/icon/index.vue";
export default {
  name: "uiLoading",
  components: { uiIcon },
  props: {
    type: {
      type: String,
      default: "circular"
    },
    // large, small
    size: {
      type: [Number, String],
      default: 32
    },
    // 是否是行内元素
    color: {
      type: String,
      default: ""
    },
    // circle, square，rightAngle
    vertical: {
      type: Boolean,
      default: false
    },
    textSize: {
      type: [Number, String],
      default: 32
    }
  },
  data() {
    return {};
  },
  computed: {
    spinnerStyle() {
      // // 暂时支持3 large small mini 和 Number类型的
      // if(isNaN(parseInt(this.size))){

      // }

      return `width : ${this.size}rpx;height : ${this.size}rpx;${
        this.color ? "color :" + this.color : ""
      }`;
    }
  },
  methods: {}
};
</script>

<style lang="scss" >
.ui-loading {
  position: relative;
  color: $color-text-base;
  font-size: 0;
  vertical-align: middle;

  .ui-loading--spinner {
    position: relative;
    display: inline-block;
    width: 60upx;
    // compatible for 1.x, users may set width or height in root element
    max-width: 100%;
    height: 60upx;
    max-height: 100%;
    vertical-align: middle;
    animation: ui-rotate 0.8s linear infinite;

    &.ui-loading--spinner-circular {
      border: 2upx solid;
      border-color: transparent;
      border-top-color: currentColor;
      border-radius: 100%;
      // .spinner-circular {
      //   display: block;
      //   width: 100%;
      //   height: 100%;
      //  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='25 25 50 50' %3E%3Ccircle cx='50' cy='50' r='20' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' style='animation:ui-circular 1.5s ease-in-out infinite'%3E%3C/circle%3E%3C/svg%3E");
      //   animation: ui-circular 1.5s ease-in-out infinite;

      // }
    }

    animation-timing-function: steps(12);
    .spinner-i {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      &::before {
        display: block;
        width: 2upx;
        height: 25%;
        margin: 0 auto;
        background-color: currentColor;
        border-radius: 40%;
        content: " ";
      }
    }

    // &--circular {
    //   animation-duration: 2s;
    // }
  }

  &__circular {
    display: block;
    width: 100%;
    height: 100%;

    circle {
      animation: van-circular 1.5s ease-in-out infinite;
      stroke: currentColor;
      stroke-width: 3;
      stroke-linecap: round;
    }
  }

  &__text {
    display: inline-block;
    margin-left: $h-spacing-small;
    color: $color-text-base;
    font-size: $font-size-base;
    vertical-align: middle;
  }

  &--vertical {
    display: flex;
    flex-direction: column;
    align-items: center;

    .van-loading__text {
      margin: $h-spacing-small 0 0;
    }
  }
}

@for $i from 1 through 12 {
  .spinner-i:nth-of-type(#{$i}) {
    transform: rotate($i * 30deg);
    opacity: 1 - (0.75 / 12) * ($i - 1);
  }
}

@keyframes ui-circular {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120;
  }
}
</style>